<template>
  <div class="question-tools">
    <div class="scale-tools">
      <button
        class="btn-group btn add"
        :class="{ disabled: props.scale >= 3 }"
        @click="scale('enlarge')"
      >
        <img src="@/assets/images/comment/enlarge.png" />
      </button>
      <button
        class="btn-group btn minis"
        :class="{ disabled: props.scale <= 0.5 }"
        @click="scale('reduce')"
      >
        <img src="@/assets/images/comment/reduce.png" />
      </button>
      <button class="btn-group btn" @click="emits('recover')">1:1</button>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  scale: {
    default: 1,
    type: Number
  }
})
const emits = defineEmits(['scale-question', 'recover'])
const scale = size => {
  if (size === 'enlarge' && props.scale >= 3) return
  if (size === 'reduce' && props.scale <= 0.5) return
  emits('scale-question', size)
}
</script>
<style lang="less" scoped>
.question-tools {
  z-index: 999;

  .btn {
    background: inherit;
    color: #fff;
    font-size: 16px;
    outline: none;
    border: none;
  }

  .scale-tools {
    height: 122px;
    width: 40px;
    border: 1px solid #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    img {
      width: 20px;
    }
  }

  .btn-group {
    &:active {
      img {
        opacity: 0.4;
      }

      color: rgba(255, 255, 255, 0.4);
    }

    &:disabled,
    &.disabled {
      cursor: not-allowed;

      img {
        opacity: 0.4;
      }
    }
  }
}
</style>
